<!-- src/views/UserProfile.vue -->
<template>
  <div class="user-profile">
    <h2>用户详情页</h2>
    <p>用户 ID: {{ $route.params.id }}</p>

    <router-link :to="$route.path + '/profile'">查看资料</router-link>
    <button @click="login">模拟登录</button>
    <button @click="logout">模拟退出</button>

    <router-view></router-view>
  </div>
</template>

<script>
import { login } from '@/api/user'

export default {
  name: 'UserProfile',
  methods: {
    async login() {
      try {
        const res = await login({ username: 'a', password: '1' })
        localStorage.setItem('token', res.token)
        alert('登录成功')
      } catch (error) {
        console.error('登录失败:', error)
        alert('登录失败')
      }
    },
    logout() {
      localStorage.removeItem('token')
      alert('已退出')
    }
  }
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
  text-align: center;
}
</style>